<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
<head>
    <meta charset="utf-8">
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/draggable.js"></script>
    <link rel="stylesheet" href="lib/reset.css">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
<style>
    body {
        position: absolute;
        left: 0;
        top: 0;
    }

    #main {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 700px;
        height: 650px;
        background: #fff;
    }

    .code-panel {
        position: fixed;
        top: 10px;
        right: 10px;
        width: 200px;
        border: 2px solid #555;
    }

    .code-line {
        margin: 15px 5px;
        font-size: 12px;
    }

    .code-line textarea {
        width: 190px;
        height: 80px;
        margin-bottom: 5px;
    }
</style>
<div id="main"></div>

<div class="code-panel">
    <div class="code-line">
                <textarea id="code1">
chart.setOption({backgroundColor: '#000'});
                </textarea>
        <input type="button" value="run" onclick="runCode('code1');"/>
        Then press restore buttton.
    </div>
    <div class="code-line">
                <textarea id="code2">
chart.setOption({backgroundColor: '#fff'});
                </textarea>
        <input type="button" value="run" onclick="runCode('code2');"/>
    </div>
    <div class="code-line">
                <textarea id="code3">
chart.setOption({
    series: [
        {id: 'pie0', label: {normal: {position: 'inside'}}}
    ]
});
                </textarea>
        <input type="button" value="run" onclick="runCode('code3');"/>
    </div>
    <div class="code-line">
                <textarea id="code4">
chart.setOption({
    timeline: {
        currentIndex: 5
    }
});
                </textarea>
        <input type="button" value="run" onclick="runCode('code4');"/>
    </div>
</div>

<script src="data/timelineGDP.js"></script>

<script>

    var chart;
    var echarts;

    // markLine: {
    //     symbol: ['arrow','none'],
    //     symbolSize: [4, 2],
    //     itemStyle: {
    //         normal: {
    //             lineStyle: {color:'orange'},
    //             barBorderColor:'orange',
    //             label: {
    //                 position:'left',
    //                 formatter:function(params){
    //                     return Math.round(params.value);
    //                 },
    //                 textStyle:{color:'orange'}
    //             }
    //         }
    //     },
    //     data: [{type: 'average', name: '平均值'}]
    // }

    require([
        'echarts'
        // 'echarts/chart/bar',
        // 'echarts/chart/pie',
        // 'echarts/component/title',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/timeline',
        // 'echarts/component/toolbox'
    ], function (ec) {
        echarts = ec;

        chart = echarts.init(document.getElementById('main'), null, {});

        draggable.init(
            document.getElementById('main'),
            chart,
            {throttle: 70}
        );


        var categoryData = [
            '北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江',
            '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南',
            '湖北', '湖南', '广东', '广西', '海南', '重庆', '四川', '贵州',
            '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆'
        ];
        var categoryDataWithReturn = [];
        for (var i = 0; i < categoryData.length; i++) {
            var word = categoryData[i];
            if (i % 2 === 0) {
                word = '\n' + word;
            }
            categoryDataWithReturn.push(word);
        }


        var categoryData = [
            '北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江',
            '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南',
            '湖北', '湖南', '广东', '广西', '海南', '重庆', '四川', '贵州',
            '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆'
        ];


        option = {
            baseOption: {
                timeline: {
                    axisType: 'category',
                    autoPlay: true,
                    playInterval: 1000,
                    data: [
                        '2002-01-01', '2003-01-01', '2004-01-01',
                        '2005-01-01', '2006-01-01', '2007-01-01',
                        '2008-01-01', '2009-01-01', '2010-01-01',
                        '2011-01-01'
                    ],
                    label: {
                        formatter: function (s) {
                            return (new Date(s)).getFullYear();
                        }
                    }
                },
                toolbox: {
                    left: 0,
                    bottom: 0,
                    feature: {
                        restore: {}
                    }
                },
                title: {
                    subtext: 'Media Query 示例'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'value',
                    name: 'GDP（亿元）',
                    max: 30000,
                    data: null
                },
                yAxis: {
                    type: 'category',
                    data: categoryData,
                    axisLabel: {interval: 0},
                    splitLine: {show: false}
                },
                legend: {
                    data: ['第一产业', '第二产业', '第三产业', 'GDP', '金融', '房地产'],
                    selected: {
                        'GDP': false, '金融': false, '房地产': false
                    }
                },
                calculable: true,
                series: [
                    {name: 'GDP', type: 'bar'},
                    {name: '金融', type: 'bar'},
                    {name: '房地产', type: 'bar'},
                    {name: '第一产业', type: 'bar'},
                    {name: '第二产业', type: 'bar'},
                    {name: '第三产业', type: 'bar'},
                    {name: 'GDP占比', type: 'pie', id: 'pie0'}
                ]
            },
            media: [
                {
                    option: {
                        legend: {
                            orient: 'horizontal',
                            left: 'right',
                            itemGap: 10
                        },
                        grid: {
                            left: '10%',
                            top: 80,
                            right: 90,
                            bottom: 100
                        },
                        xAxis: {
                            nameLocation: 'end',
                            nameGap: 10,
                            splitLine: {
                                show: true
                            },
                            axisLabel: {
                                interval: 'auto'
                            }
                        },
                        timeline: {
                            show: true,
                            orient: 'horizontal',
                            inverse: false,
                            left: '20%',
                            right: '20%',
                            bottom: 10,
                            height: 40
                        },
                        series: [
                            {name: 'GDP占比', center: ['75%', '30%'], radius: '28%'}
                        ]
                    }
                },
                {
                    query: {maxWidth: 670, minWidth: 550},
                    option: {
                        legend: {
                            orient: 'horizontal',
                            left: 200,
                            itemGap: 5
                        },
                        grid: {
                            left: '10%',
                            top: 80,
                            right: 90,
                            bottom: 100
                        },
                        xAxis: {
                            nameLocation: 'end',
                            nameGap: 10,
                            splitLine: {
                                show: true
                            },
                            axisLabel: {
                                interval: 'auto'
                            }
                        },
                        timeline: {
                            show: true,
                            orient: 'horizontal',
                            inverse: false,
                            left: '20%',
                            right: '20%',
                            bottom: 10,
                            height: 40
                        },
                        series: [
                            {name: 'GDP占比', center: ['75%', '30%'], radius: '28%'}
                        ]
                    }
                },
                {
                    query: {maxWidth: 550},
                    option: {
                        legend: {
                            orient: 'vertical',
                            left: 'right',
                            itemGap: 5
                        },
                        grid: {
                            left: 55,
                            top: '32%',
                            right: 100,
                            bottom: 50
                        },
                        xAxis: {
                            nameLocation: 'middle',
                            nameGap: 25,
                            axisLabel: {
                                interval: 1
                            }
                        },
                        timeline: {
                            show: true,
                            orient: 'vertical',
                            inverse: true,
                            right: 10,
                            top: 150,
                            bottom: 10,
                            width: 55
                        },
                        series: [
                            {name: 'GDP占比', center: ['45%', '20%'], radius: '28%'}
                        ]
                    }
                },
                {
                    query: {maxWidth: 350},
                    option: {
                        legend: {
                            orient: 'vertical',
                            left: 'right',
                            itemGap: 5
                        },
                        grid: {
                            left: 55,
                            top: '32%',
                            right: 100,
                            bottom: 50
                        },
                        xAxis: {
                            nameLocation: 'middle',
                            nameGap: 25,
                            axisLabel: {
                                interval: 1
                            }
                        },
                        timeline: {
                            show: false
                        },
                        series: [
                            {name: 'GDP占比', center: ['45%', '20%'], radius: '28%'}
                        ]
                    }
                }
            ],
            options: [
                {
                    title: {text: '2002全国宏观经济指标'},
                    series: [
                        {data: dataMap.dataGDP['2002']},
                        {data: dataMap.dataFinancial['2002']},
                        {data: dataMap.dataEstate['2002']},
                        {data: dataMap.dataPI['2002']},
                        {data: dataMap.dataSI['2002']},
                        {data: dataMap.dataTI['2002']},
                        {
                            data: [
                                {name: '第一产业', value: dataMap.dataPI['2002sum']},
                                {name: '第二产业', value: dataMap.dataSI['2002sum']},
                                {name: '第三产业', value: dataMap.dataTI['2002sum']}
                            ], id: 'pie0'
                        }
                    ]
                },
                {
                    title: {text: '2003全国宏观经济指标'},
                    series: [
                        {data: dataMap.dataGDP['2003']},
                        {data: dataMap.dataFinancial['2003']},
                        {data: dataMap.dataEstate['2003']},
                        {data: dataMap.dataPI['2003']},
                        {data: dataMap.dataSI['2003']},
                        {data: dataMap.dataTI['2003']},
                        {
                            data: [
                                {name: '第一产业', value: dataMap.dataPI['2003sum']},
                                {name: '第二产业', value: dataMap.dataSI['2003sum']},
                                {name: '第三产业', value: dataMap.dataTI['2003sum']}
                            ], id: 'pie0'
                        }
                    ]
                },
                {
                    title: {text: '2004全国宏观经济指标'},
                    series: [
                        {data: dataMap.dataGDP['2004']},
                        {data: dataMap.dataFinancial['2004']},
                        {data: dataMap.dataEstate['2004']},
                        {data: dataMap.dataPI['2004']},
                        {data: dataMap.dataSI['2004']},
                        {data: dataMap.dataTI['2004']},
                        {
                            data: [
                                {name: '第一产业', value: dataMap.dataPI['2004sum']},
                                {name: '第二产业', value: dataMap.dataSI['2004sum']},
                                {name: '第三产业', value: dataMap.dataTI['2004sum']}
                            ], id: 'pie0'
                        }
                    ]
                },
                {
                    title: {text: '2005全国宏观经济指标'},
                    series: [
                        {data: dataMap.dataGDP['2005']},
                        {data: dataMap.dataFinancial['2005']},
                        {data: dataMap.dataEstate['2005']},
                        {data: dataMap.dataPI['2005']},
                        {data: dataMap.dataSI['2005']},
                        {data: dataMap.dataTI['2005']},
                        {
                            data: [
                                {name: '第一产业', value: dataMap.dataPI['2005sum']},
                                {name: '第二产业', value: dataMap.dataSI['2005sum']},
                                {name: '第三产业', value: dataMap.dataTI['2005sum']}
                            ], id: 'pie0'
                        }
                    ]
                },
                {
                    title: {text: '2006全国宏观经济指标'},
                    series: [
                        {data: dataMap.dataGDP['2006']},
                        {data: dataMap.dataFinancial['2006']},
                        {data: dataMap.dataEstate['2006']},
                        {data: dataMap.dataPI['2006']},
                        {data: dataMap.dataSI['2006']},
                        {data: dataMap.dataTI['2006']},
                        {
                            data: [
                                {name: '第一产业', value: dataMap.dataPI['2006sum']},
                                {name: '第二产业', value: dataMap.dataSI['2006sum']},
                                {name: '第三产业', value: dataMap.dataTI['2006sum']}
                            ], id: 'pie0'
                        }
                    ]
                },
                {
                    title: {text: '2007全国宏观经济指标'},
                    series: [
                        {data: dataMap.dataGDP['2007']},
                        {data: dataMap.dataFinancial['2007']},
                        {data: dataMap.dataEstate['2007']},
                        {data: dataMap.dataPI['2007']},
                        {data: dataMap.dataSI['2007']},
                        {data: dataMap.dataTI['2007']},
                        {
                            data: [
                                {name: '第一产业', value: dataMap.dataPI['2007sum']},
                                {name: '第二产业', value: dataMap.dataSI['2007sum']},
                                {name: '第三产业', value: dataMap.dataTI['2007sum']}
                            ], id: 'pie0'
                        }
                    ]
                },
                {
                    title: {text: '2008全国宏观经济指标'},
                    series: [
                        {data: dataMap.dataGDP['2008']},
                        {data: dataMap.dataFinancial['2008']},
                        {data: dataMap.dataEstate['2008']},
                        {data: dataMap.dataPI['2008']},
                        {data: dataMap.dataSI['2008']},
                        {data: dataMap.dataTI['2008']},
                        {
                            data: [
                                {name: '第一产业', value: dataMap.dataPI['2008sum']},
                                {name: '第二产业', value: dataMap.dataSI['2008sum']},
                                {name: '第三产业', value: dataMap.dataTI['2008sum']}
                            ], id: 'pie0'
                        }
                    ]
                },
                {
                    title: {text: '2009全国宏观经济指标'},
                    series: [
                        {data: dataMap.dataGDP['2009']},
                        {data: dataMap.dataFinancial['2009']},
                        {data: dataMap.dataEstate['2009']},
                        {data: dataMap.dataPI['2009']},
                        {data: dataMap.dataSI['2009']},
                        {data: dataMap.dataTI['2009']},
                        {
                            data: [
                                {name: '第一产业', value: dataMap.dataPI['2009sum']},
                                {name: '第二产业', value: dataMap.dataSI['2009sum']},
                                {name: '第三产业', value: dataMap.dataTI['2009sum']}
                            ], id: 'pie0'
                        }
                    ]
                },
                {
                    title: {text: '2010全国宏观经济指标'},
                    series: [
                        {data: dataMap.dataGDP['2010']},
                        {data: dataMap.dataFinancial['2010']},
                        {data: dataMap.dataEstate['2010']},
                        {data: dataMap.dataPI['2010']},
                        {data: dataMap.dataSI['2010']},
                        {data: dataMap.dataTI['2010']},
                        {
                            data: [
                                {name: '第一产业', value: dataMap.dataPI['2010sum']},
                                {name: '第二产业', value: dataMap.dataSI['2010sum']},
                                {name: '第三产业', value: dataMap.dataTI['2010sum']}
                            ], id: 'pie0'
                        }
                    ]
                },
                {
                    title: {text: '2011全国宏观经济指标'},
                    series: [
                        {data: dataMap.dataGDP['2011']},
                        {data: dataMap.dataFinancial['2011']},
                        {data: dataMap.dataEstate['2011']},
                        {data: dataMap.dataPI['2011']},
                        {data: dataMap.dataSI['2011']},
                        {data: dataMap.dataTI['2011']},
                        {
                            data: [
                                {name: '第一产业', value: dataMap.dataPI['2011sum']},
                                {name: '第二产业', value: dataMap.dataSI['2011sum']},
                                {name: '第三产业', value: dataMap.dataTI['2011sum']}
                            ], id: 'pie0'
                        }
                    ]
                }
            ]
        };

        chart.setOption(option);

        chart.on('legendSelected', function () {
        });

        window.onresize = chart.resize;
    });
</script>


<script type="text/javascript">
    function runCode(id) {
        var textarea = document.getElementById(id);
        var code = textarea.value;
        (new Function('chart', 'echarts', code))(chart, echarts);
    }
</script>

</body>
</html>
